<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
        <el-input
          v-model="searchInfo"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column :label="translate('出库类型')">
          <template #default="{ row }">
            <div>{{ row.BillType }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :label="translate('单据编号')"
          prop="BillNo"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('库位号')"
          prop="WSCode"
          show-overflow-tooltip
        />
        <el-table-column :label="translate('批次号')" prop="BatchNo" />
        <el-table-column
          :label="translate('物资编码')"
          prop="ItemCode"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('物资名称')"
          prop="ItemName"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('物资规格')"
          prop="ItemSpec"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('物资单位')"
          prop="ItemUnit"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('标识')"
          prop="Sign"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('库存数量')"
          prop="StockQty"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('出入库数量')"
          prop="Qty"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('物资单价')"
          prop="Price"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('税率')"
          prop="TaxRate"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('金额')"
          prop="Amt"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('含税金额')"
          prop="TaxAmt"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('库存状态')"
          prop="StockStatus"
          show-overflow-tooltip
        />
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { InOuStockData } from '@/api/form'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Arrival',
    components: {},
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        layout: 'total, sizes, prev, pager, next, jumper',
        translate: translate,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'ItemName', value: this.searchInfo, displayType: 'like' },
          ]),
          export: false,
          value: '',
        }
        const data = await InOuStockData(params)
        this.tableData = data.data.rows
        this.total = data.data.total
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
  }
</style>
